import ConfigProvider from 'ant-design-vue/es/config-provider/index.js';
import Empty from 'ant-design-vue/es/empty/index.js';
import zhCN from 'ant-design-vue/es/locale/zh_CN.js';
import { createApp, h } from 'vue';
import { RouterView } from 'vue-router';
import { get } from 'lodash-es';
import { useAntdvThemeStore } from '@gis/lib/pinia/antdvTheme.js';

export function getLocale() {
  return zhCN;
}

export function getContainer() {
  let container = get(window.__GLOBAL_VUE_APP, '_container');
  return container || document.getElementById('app') || document.body;
}

export function getPopupContainer() {
  return getContainer();
}

export const App = {
  setup() {
    const themeStore = useAntdvThemeStore();
    const locale = getLocale();
    return () =>
      h(
        ConfigProvider,
        { theme: themeStore.provider, locale, getPopupContainer },
        {
          renderEmpty: () => h(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE }),
          default: () => h(RouterView),
        }
      );
  },
};

export default function useApp(props) {
  const app = createApp(App, props);
  app.config.globalProperties.getLocale = getLocale;
  app.config.globalProperties.getContainer = getContainer;
  app.config.globalProperties.getPopupContainer = getPopupContainer;
  return app;
}
